<div id="{{ patternPartial }}" class="pl-c-pattern">

	<div class="pl-c-pattern__header">

		<h3 class="pl-c-pattern__title">

			<a href="../../patterns/{{ patternLink }}" class="pl-c-pattern__title-link patternLink" data-patternpartial="{{ patternPartial }}" title="Link to Pattern">
				{{ patternName }}

				{{# patternState }}
				<span class="pl-c-pattern-state pl-c-pattern-state--{{ patternState }}" title="{{ patternState }}"></span>
				{{/ patternState }}

			</a><!--end pl-c-pattern__title-link-->

		</h3><!--end pl-c-pattern__title-->

		<button class="pl-c-pattern__extra-toggle pl-js-pattern-extra-toggle" id="pl-pattern-extra-toggle-{{ patternPartial }}" data-patternpartial="{{ patternPartial }}" title="View Pattern Info" type="button">
			<span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--expand">Expand</span>
			<span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--collapse">Collapse</span>
				<svg viewBox="0 0 16 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--expand">
					<path fill="currentColor" d="M9 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
					<path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
				</svg>

				<svg viewBox="0 0 20 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--collapse">
					<path fill="currentColor" d="M13 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
					<path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>
					<path fill="currentColor" d="M10.958 2.352l1.085 0.296-3 11-1.085-0.296 3-11z"></path>
				</svg>
		</button>

	</div><!--end pl-c-pattern__header-->

	<div class="pl-c-pattern__extra pl-js-pattern-extra" id="pl-pattern-extra-{{ patternPartial }}">
    </div><!--end pl-c-pattern__extra-->

	<div class="pl-js-pattern-example">
	{{{ patternPartialCode }}}
	</div><!--end pl-js-pattern-example-->

	<script type="text/json" id="pl-pattern-data-{{patternPartial}}" class="pl-js-pattern-data">
	{{{ patternData }}}
	</script>

</div><!--end pl-c-pattern-->
